<template>
<div class="rates">
    <div>
        <ul>
            <li class="rate-types clearfix">
                <span class="rate-type"
                 :class="{'active':activeIndex==index}"
                  @click="filterRates(index)"
                 v-for="(label,index) in mpLabelList"
                  :key="index"
                   v-text="label.labelName+'('+label.labelNum+')'">
                </span>
            </li>
        </ul>
    </div>
    <div class="ui-form">
        <ul class="mpcList">
            <li class="list bd-top"
             v-for="(c,index) in mpcList"
              :key="index">
                <p>
                    <span class="fr c9">{{c.userUsername}}</span>
                </p>
                <p>
                    <i class="lyf-icons lyf-star"
                     v-for="(c,index) in 5"
                     :key="index"></i>
                </p>
                <p class="mgB10"></p>
                <p>
                    <span class="c9">购买日期：{{new Date(c.orderCreateTime).toLocaleString()}}</span>
                </p>
            </li>
        </ul>
    </div>
</div>
</template>
<script>
export default{
    data() {
        return {
            activeIndex: 0,
            mpLabelList: [],
            mpcList: []
        }
    },
    computed: {
        rateFlag() {
            return this.mpLabelList[this.activeIndex].rateFlag;
        }
    },
    methods: {
        filterRates(index) {
            this.activeIndex = index;
        }
    },
    created() {
        fetch("static/data/goodDetail/getRate.json")
        .then(res => {
            return res.json();
        }).then(res => {
            let data = res.data;
            this.mpLabelList = data.mpLabelList;
            this.mpcList = data.mpcList.listObj;
            // console.log(data)
        })
    }
}
</script>
<style lang="less">
.rate-type{
    border-radius: .04rem;
    border: 1px solid #ffc399;
    color: #666;
    height: .15rem;
    line-height: .15rem;
    padding: .03rem .05rem;
    background-color: #fff5ed;
    margin-right: .15rem;
    margin-top: .05rem;
    float: left;
}
.rate-type.active{
    color: #fff!important;
    background-color: #fe6a00!important;
}
.mpcList .list{
    padding: .1rem;
    padding-left: .05rem;
    margin-left: .1rem;
}
.list:first-child{
    border-top: 0;
}
.rate-types{
    background-color: #fff;
    padding: .12rem .1rem .12rem 0;
}
.lyf-star, .lyf-star-gray{
    margin-right: .02rem;
}
</style>